{% load bootstrapped_goodies_tags %}
{% load helpers %}
{% load i18n %}
{% load plugins %}
{% load static%}

<!DOCTYPE html>
<html lang="en"{% if request.COOKIES|get_item:"theme" == 'dark' %} data-theme="dark"{% endif %}>
    <head>
        <title>{% block title %}Admin Home{% endblock %} - Nautobot</title>
        {% include 'inc/media.html' %}
        {% block extrahead %}{% endblock %}
        {% block extrastyle %}{% endblock %}

        <style>
            .nb-description {
                padding-bottom: 20px;
            }
            .form-text {
                white-space: initial;
                word-wrap: break-word;
            }
            .related-widget-wrapper {
                float: none;
            }
            .selectfilter {
                width: 100%;
            }
            .vLargeTextField, .vXMLLargeTextField {
                width: 100%;
            }
            .vTextField {
                width: 100%;
            }
            .related-widget-wrapper > select {
                width: 100%;
            }
            .form-horizontal .control-label {
                text-align: left;
            }
            input[type="checkbox"] {
                margin-left: 0 !important;
            }
            textarea {
                width: 100%;
            }
        </style>
    </head>
    <body{% if is_popup %} class="ps-0"{% endif %}>

        {% if not is_popup %}
            {% include 'inc/nav_menu.html' %}
        {% endif %}

        <header id="header">
            <div class="banner-alert-area">
                {% if not is_popup %}
                    {% include 'inc/header_banners.html' %}
                {% endif %}
                {% include 'inc/header_messages.html' %}
            </div>
            {% if not is_popup %}
                <div class="container-fluid mb-12 mt-16">
                    <div class="row">
                        <div class="col-4">
                            <h1 class="d-flex fs-2 gap-8 lh-sm py-6">
                                <img
                                    alt="Nautobot chevron"
                                    class="align-self-start flex-grow-0 flex-shrink-0 my-n4"
                                    role="presentation"
                                    src="{% static 'img/nautobot_chevron.svg' %}"
                                    style="width: 1.5rem;"
                                />
                                {% block pretitle %}{% endblock %}
                                {% block content_title %}
                                    {% if title %}
                                        {% render_with_template_if_exist title|lower|add:"/admin_app_name.html" title %}
                                    {% endif %}
                                {% endblock %}
                            </h1>
                        </div>
                        {% include 'inc/header.html' %}
                        <div class="col-12">
                            <nav aria-label="Breadcrumbs" class="mt-1">
                                {% block breadcrumbs %}{% endblock breadcrumbs %}
                            </nav>
                        </div>
                    </div>
                </div>
                {% block header %}{% endblock header %}
            {% endif %}
        </header>

        <main class="container-fluid wrapper{% if is_popup %} pb-0{% endif %}" id="main-content" tabindex="-1">
            <div class="align-items-center d-flex gap-8 justify-content-end mb-16 d-print-none flex-wrap">
                {% block object-tools %}{% endblock %}
            </div>
            <!-- Content -->
            {% block content %}{{ content }}{% endblock %}
        </main>

        {% if not is_popup %}
            {% if "BANNER_BOTTOM"|settings_or_config %}
                <div class="alert alert-info text-center nb-banner-bottom" role="alert">
                    {{ "BANNER_BOTTOM"|settings_or_config|render_markdown }}
                </div>
            {% endif %}
            {% include 'inc/footer.html' %}
        {% endif %}

        {% block javascript %}
            {% include 'inc/javascript.html' %}
        {% endblock %}
    </body>
</html>
